<template>
  <div class="technology-sharing-page">
    <h2 class="content-title">技术分享</h2>
    <div class="tech-categories">
      <div class="tech-category" :class="{ 'active': activeCategory === 'all' }" @click="setCategory('all')">全部</div>
      <div class="tech-category" :class="{ 'active': activeCategory === 'video' }" @click="setCategory('video')">视频教程</div>
      <div class="tech-category" :class="{ 'active': activeCategory === 'blog' }" @click="setCategory('blog')">技术博客</div>
      <div class="tech-category" :class="{ 'active': activeCategory === 'research' }" @click="setCategory('research')">研究报告</div>
      <div class="tech-category" :class="{ 'active': activeCategory === 'case' }" @click="setCategory('case')">应用案例</div>
    </div>

    <div class="tech-list">
      <div class="tech-item" v-for="(tech, index) in filteredTechList" :key="index">
        <div class="tech-image">
          <img :src="tech.image" :alt="tech.title">
          <div class="tech-tag" :class="tech.type">{{ getTechTypeText(tech.type) }}</div>
        </div>
        <div class="tech-content">
          <h3 class="tech-title">{{ tech.title }}</h3>
          <div class="tech-meta">
            <span class="tech-date">{{ tech.date }}</span>
            <span class="tech-author">{{ tech.author }}</span>
          </div>
          <p class="tech-summary">{{ tech.summary }}</p>
          <div class="tech-footer">
            <div class="tech-tags">
              <span class="tech-tag-item" v-for="(tag, i) in tech.tags" :key="i">{{ tag }}</span>
            </div>
            <a :href="tech.link" class="read-more" target="_blank">查看详情</a>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        :current-page="1"
        :page-size="10">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TechnologySharingPage',
  data() {
    return {
      activeCategory: 'all',
      techList: [
        {
          title: '数字孪生交通系统构建与实现：从理论到实践',
          date: '2023-05-15',
          author: '张工程师',
          type: 'blog',
          image: 'http://www.sutpc.com/resource/sutpc/images/tech1.jpg',
          summary: '本文详细介绍了数字孪生交通系统的构建方法与实现途径，从理论基础到实际应用案例，分享了中空领航在该领域的技术积累与创新成果。文章深入浅出地阐述了数据采集、模型构建、系统集成等关键环节的技术要点。',
          tags: ['数字孪生', '交通系统', '技术实现'],
          link: 'javascript:;'
        },
        {
          title: '智慧交通大数据分析技术视频教程',
          date: '2023-05-10',
          author: '王数据科学家',
          type: 'video',
          image: 'http://www.sutpc.com/resource/sutpc/images/tech2.jpg',
          summary: '这套视频教程由中空领航数据团队出品，系统讲解了智慧交通领域的大数据分析技术与方法，包括数据预处理、特征工程、模型训练等环节，并通过实际案例演示如何利用Python进行交通数据挖掘与分析。',
          tags: ['大数据', 'Python', '数据分析'],
          link: 'javascript:;'
        },
        {
          title: '2023年中国城市交通拥堵分析报告',
          date: '2023-04-28',
          author: '中空领航研究院',
          type: 'research',
          image: 'http://www.sutpc.com/resource/sutpc/images/tech3.jpg',
          summary: '本报告基于对全国50个主要城市的交通大数据分析，深入剖析了2023年上半年中国城市交通拥堵状况及变化趋势。报告从时间分布、空间分布、成因分析等多个维度，揭示了当前城市交通拥堵的特点与规律。',
          tags: ['交通拥堵', '城市交通', '数据报告'],
          link: 'javascript:;'
        },
        {
          title: '智能信号灯控制系统在深圳福田CBD的应用案例',
          date: '2023-04-20',
          author: '李项目经理',
          type: 'case',
          image: 'http://www.sutpc.com/resource/sutpc/images/tech4.jpg',
          summary: '本文详细介绍了中空领航智能信号灯控制系统在深圳福田CBD的应用案例。通过部署AI自适应信号控制算法，该区域交通通行效率提升25%，等待时间减少30%。文章分享了项目实施过程中的技术方案、难点突破与实施效果。',
          tags: ['智能信号灯', '交通优化', 'AI应用'],
          link: 'javascript:;'
        },
        {
          title: '交通数据可视化技术与实践',
          date: '2023-04-15',
          author: '赵设计师',
          type: 'blog',
          image: 'http://www.sutpc.com/resource/sutpc/images/tech5.jpg',
          summary: '本文探讨了交通数据可视化的技术与实践，介绍了多种数据可视化工具与方法，包括Echarts、D3.js等前端可视化库的应用，以及大屏设计的原则与技巧。通过实际案例，分享了如何将复杂的交通数据转化为直观、易懂的视觉呈现。',
          tags: ['数据可视化', 'Echarts', '大屏设计'],
          link: 'javascript:;'
        },
        {
          title: '车路协同技术视频详解',
          date: '2023-04-08',
          author: '陈专家',
          type: 'video',
          image: 'http://www.sutpc.com/resource/sutpc/images/tech6.jpg',
          summary: '这套视频详细讲解了车路协同技术的原理、架构与应用场景，包括V2X通信技术、路侧设备部署、协同感知与决策等内容。视频通过动画演示和实际案例，深入浅出地阐述了车路协同如何赋能智能交通与自动驾驶。',
          tags: ['车路协同', 'V2X', '智能交通'],
          link: 'javascript:;'
        }
      ]
    }
  },
  computed: {
    filteredTechList() {
      if (this.activeCategory === 'all') {
        return this.techList;
      } else {
        return this.techList.filter(item => item.type === this.activeCategory);
      }
    }
  },
  methods: {
    setCategory(category) {
      this.activeCategory = category;
    },
    getTechTypeText(type) {
      const typeMap = {
        'video': '视频教程',
        'blog': '技术博客',
        'research': '研究报告',
        'case': '应用案例'
      };
      return typeMap[type] || '技术分享';
    }
  }
}
</script>

<style scoped>
.technology-sharing-page {
  max-width: 100%;
}

.content-title {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.content-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
}

.tech-categories {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
}

.tech-category {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  font-size: 16px;
  color: var(--text-color);
}

.tech-category.active {
  color: var(--primary-color);
  font-weight: bold;
}

.tech-category.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
}

.tech-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.tech-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: white;
}

.tech-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.tech-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.tech-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.tech-item:hover .tech-image img {
  transform: scale(1.05);
}

.tech-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 12px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.tech-tag.video {
  background-color: #FF5722;
}

.tech-tag.blog {
  background-color: #2196F3;
}

.tech-tag.research {
  background-color: #4CAF50;
}

.tech-tag.case {
  background-color: #9C27B0;
}

.tech-content {
  padding: 20px;
}

.tech-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--text-color);
  line-height: 1.4;
  height: 50px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tech-meta {
  color: #999;
  font-size: 14px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}

.tech-summary {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  height: 75px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.tech-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
}

.tech-tag-item {
  background-color: #f5f5f5;
  color: #777;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.read-more {
  color: var(--primary-color);
  font-weight: bold;
  transition: color 0.3s;
}

.read-more:hover {
  color: var(--secondary-color);
}

.pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

@media (max-width: 992px) {
  .tech-list {
    grid-template-columns: 1fr;
  }
  
  .tech-categories {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
  }
}
</style> 